import { type QRL, component$ } from '@builder.io/qwik';
import { cn } from '../cn';

type TabsProps = {
  tabs: { key: string; title: string }[];
  activeTabKey: string;
  onChange$: QRL<(key: string) => void>;
};

export default component$<TabsProps>(({ tabs, activeTabKey, onChange$ }) => {
  return (
    <nav class="my-4">
      {tabs.map((tab) => (
        <span
          class={cn(
            'inline px-4 py-2 border-b-2 border-kq-200 text-kq-900 select-none cursor-pointer',
            activeTabKey == tab.key && 'rounded-t bg-kq-100 border-kq-400'
          )}
          key={tab.key}
          onClick$={() => onChange$(tab.key)}
        >
          {tab.title}
        </span>
      ))}
    </nav>
  );
});
